<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css" />
 <script src="../../layui/layui.js"></script>
 <title>tabs 选项卡</title>
</head>

<body>
 <div class="layui-container">
  <h3>默认Tab选项卡</h3>
  <p>ab广泛应用于Web页面，因此我们也对其进行了良好的支持。Layui内置多种Tab风格，支持删除选项卡、并提供响应式支持。
   这是一个最基本的例子</p>
  <div class="layui-row">
   <div class="layui-tab">
    <ul class="layui-tab-title">
     <li class="layui-this">网站设置</li>
     <li>用户管理</li>
     <li>权限分配</li>
     <li>商品管理</li>
     <li>订单管理</li>
    </ul>
    <div class="layui-tab-content">
     <div class="layui-tab-item layui-show">内容1</div>
     <div class="layui-tab-item">内容2</div>
     <div class="layui-tab-item">内容3</div>
     <div class="layui-tab-item">内容4</div>
     <div class="layui-tab-item">内容5</div>
    </div>
   </div>
  </div>
  <h3>Tab简洁风格</h3>
  <p>通过追加class：layui-tab-brief 来设定简洁风格。</p>
  <p>值得注意的是，如果存在 layui-tab-item 的内容区域，在切换时自动定位到对应内容。如果不存在内容区域，则不会定位到对应内容。你通常需要设置过滤器，通过 element模块的监听tab事件来进行切换操作</p>
  <div class="layui-tab layui-tab-brief" lay-filter="test1">
   <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
   </ul>
   <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">网站设置</div>
    <div class="layui-tab-item">用户管理</div>
    <div class="layui-tab-item">权限分配</div>
    <div class="layui-tab-item">商品管理</div>
    <div class="layui-tab-item">订单管理</div>
   </div>
  </div>


 </div>
 <script>
  layui.use(['form', 'layer', 'element'], function () {
   var foprm = layui.form,
    element = layui.element;
   element.render('nav', 'component-nav');

   element.on('tab(test1)', function (obj) {
    layer.msg(obj.index + '：' + this.innerHTML);
   });
  });
 </script>
</body>

</html>